<template>
  <div>
    <div class="al-flex-container-center-vh al-width-100 bg-gradient">
      <div v-for="(item, index) in countData"
           :key="index"
           class="al-m-30px">
        <img :src="item.icon" alt="">
        <p class="al-text-color-light-black">{{item.text}}</p>
        <p class="al-flex-container-center-h al-text-color-light-blue">{{item.count}}</p>
      </div>

    </div>
  </div>
</template>

<script>

  import eventBus from "../../../util/bus/eventBus";
  import {request} from "../../../util/network/request";
  import {APPOINTMENT_GET_BY_USER_ID} from "../../../util/network/api/appointment/api-appointment";
  import {WORKS_GET_BY_USER_ID} from "../../../util/network/api/works/api-works";
  import {USER_GET_ALBUM} from "../../../util/network/api/user/api-user";

  export default {
    name: "CountInfoComponent",
    //组件
    components: {},
    //属性
    props: {
      // uid: Number || String
    },

    //数据
    data() {
      return {
        uid: this.$route.params.uid,
        countData: [
          {
            text: "约拍",
            count: 0,
            icon: "https://alanlee-panda-appointment.oss-cn-shenzhen.aliyuncs.com/images/icon/%E7%9B%B8%E6%9C%BA.png"
          },
          {
            text: "作品",
            count: 0,
            icon: "https://alanlee-panda-appointment.oss-cn-shenzhen.aliyuncs.com/images/icon/%E8%A1%A8%E5%8D%95.png"
          },
          {
            text: "相册",
            count: 0,
            icon: "https://alanlee-panda-appointment.oss-cn-shenzhen.aliyuncs.com/images/icon/%E5%9B%AD%E5%8C%BA%E5%AF%BC%E8%88%AA.png"
          }
        ]
      }
    },

    //挂载完成时
    mounted() {
      this.getAppointmentCount(this.uid);
      this.getWorksCount(this.uid);
      this.getAlbumCount(this.uid);
    },

    //方法
    methods: {
      //获取约拍数量
      getAppointmentCount(uid, pageNum = 1, pageSize = 6) {
        request({
          url: APPOINTMENT_GET_BY_USER_ID + uid + `?pageNum=${pageNum}&pageSize=${pageSize}`,
          method: 'get',
          headers: {}
        }).then(res => {
          // console.log(res);
          this.countData[0].count = res.data.data.total;
        }).catch(err => {
          console.log(err)
        })
      },

      //获取作品数量
      getWorksCount(uid, pageNo = 1, pageSize = 4) {
        request({
          method: 'get',
          url: WORKS_GET_BY_USER_ID + uid + `?pageNum=${pageNo}&pageSize=${pageSize}`,
        }).then(res => {
          // console.log(res);
          this.countData[1].count = res.data.data.total;
        }).catch(err => {
          console.log(err);
        })
      },

      //获取相册数量
      getAlbumCount(uid) {
        request({
          url: USER_GET_ALBUM + uid,
          method: 'get',
        }).then(res => {
          // console.log(res);
          this.countData[2].count = res.data.data.length;
        }).catch(err => {
          console.log(err)
        })
      },
    },

    //计算属性
    computed: {},

    //监听
    watch: {}
  }
</script>

<style scoped>

  .bg-gradient {
    background-image: url("https://alanlee-panda-appointment.oss-cn-shenzhen.aliyuncs.com/images/chahua/undraw_site_content_ihgn.png");
    background-size: 25%;
    background-position: right bottom;
    background-repeat: no-repeat;
  }
</style>
